<template>
  <div>
    <zm-form :model="onlineRule" ref="form" label-width="150px">
      <!-- 选择影院组件 -->
      <cinema-radio
        v-model="onlineRule"
        @input="(val) => handleFinalAfter(val)"
      ></cinema-radio>
      <zm-form-item
        label="兑换范围"
        :prop="`goodsType`"
        :rules="{
          required: true,
          message: '*为必填，不能为空',
          trigger: 'blur',
        }"
      >
        <el-radio-group v-model="onlineRule.goodsType" @change="setGoodsID">
          <el-radio label="1">全部卖品</el-radio>
          <el-radio label="2">指定卖品</el-radio>
        </el-radio-group>
        <zm-data-select
          v-if="onlineRule.goodsType === '2'"
          v-model="onlineRule.goodsId"
          :list="goodList"
          class="w300 mt10 db"
          clearable
          placeholder="选择指定卖品"
          multiple
          str
        >
        </zm-data-select>
      </zm-form-item>
      <!-- 优惠面值 start -->
      <zm-form-item
        label="优惠面值"
        :prop="`isDiscount`"
        :rules="{
          required: true,
          message: '*为必填，不能为空',
          trigger: 'blur',
        }"
      >
        <el-radio-group v-model="onlineRule.isDiscount">
          <el-radio label="0">不限额优惠</el-radio>
          <el-radio label="1">限额优惠</el-radio>
        </el-radio-group>
        <zm-form-item
          class="mt10"
          v-if="+onlineRule.isDiscount === 0"
          :prop="`couponPrice`"
          :rules="{
            validator: VALID_RULES.stringNumber,
          }"
        >
          <span>优惠券抵值金额</span>
          <zm-input
            class="w200"
            v-model="onlineRule.couponPrice"
            placeholder="优惠券抵值金额"
            type="number"
          >
            <template slot="append">元</template>
          </zm-input>
        </zm-form-item>
        <div class="mt10" v-if="+onlineRule.isDiscount === 1">
          <zm-form-item
            class="dib"
            :prop="`fullPrice`"
            :rules="{
          validator: (rule, val, callBack) =>
            handleLimitMin(rule, val, callBack, onlineRule.reductionPrice),
          required: true,
          trigger: 'blur',
        }"
          >
            <span>满</span>
            <zm-input class="w150" v-model="onlineRule.fullPrice" type="number">
              <template slot="append">元</template>
            </zm-input>
            <span>减</span>
          </zm-form-item>
          <zm-form-item
            class="dib"
            :prop="`reductionPrice`"
            :rules="{
          validator: (rule, val, callBack) =>
            handleLimitMax(rule, val, callBack, onlineRule.fullPrice),
          trigger: 'blur',
        }"
          >
            <zm-input
              class="w150"
              v-model="onlineRule.reductionPrice"
              placeholder="满减金额"
              type="number"
            >
              <template slot="append">元</template>
            </zm-input>
          </zm-form-item>
        </div>
      </zm-form-item>
      <!-- 优惠面值 end -->
      <zm-form-item
        label="是否限制使用时间"
        :prop="`isLimitUseTime`"
        :rules="{
          required: true,
          message: '*为必填，不能为空',
          trigger: 'blur',
        }"
      >
        <el-radio-group v-model="onlineRule.isLimitUseTime" @change="handleClearTime">
          <el-radio label="0">不限制</el-radio>
          <el-radio label="1">限制</el-radio>
        </el-radio-group>
        <zm-date-picker
          class="ml10"
          v-if="+onlineRule.isLimitUseTime === 1"
          type="datetimerange"
          :target="onlineRule"
          start-key="useStartTime"
          end-key="useEndTime"
        />
      </zm-form-item>
    </zm-form>
  </div>
</template>

<script>
import CinemaRadio from '@/views/product/components/CinemaRadio'
import tableMixin from '@/mixins/zmTableMixin'
import VALID_RULES from '@/utils/validateRule'
import cloudApis from '@/api/src/cloud'

export default {
  name: 'SellOnlineRule',
  components: { CinemaRadio },
  mixins: [tableMixin],
  inject: ['$product'],
  data () {
    return {
      VALID_RULES,
      isShowGoodsSelect: false, // 指定卖品下拉框
      goodList: []
    }
  },
  computed: {
    onlineRule: {
      get () {
        return this.$product.form.onlineRule[0]
      },
      set (val) {
        this.$product.form.onlineRule[0] = val
      }
    }
  },
  watch: {},
  created () {
    this.init()
  },
  methods: {
    async init () {
      this.goodList = await cloudApis.getGoodsList()
    },
    // 选择影院组件回调
    handleFinalAfter (val = { relationType: '-1', relationId: '-1' }) {
      if (val.relationType === '-1') {
        val.relationId = '-1'
      }
      this.$set(this.$product.form.onlineRule, 0, {
        ...this.onlineRule,
        ...val
      })
    },
    setGoodsID (val) {
      if (val === '1') {
        this.$set(this.onlineRule, 'goodsId', '-1')
      } else {
        this.$set(this.onlineRule, 'goodsId', '')
      }
    },
    validate () {
      return new Promise((resolve, reject) => {
        this.$refs.form.validate((valid) => {
          if (valid) {
            resolve()
          } else {
            reject('线上规则')
          }
        })
      })
    },
    // 校验可兑换范围的最大值
    handleLimitMax (rule, val, callBack, minVal) {
      const reg = new RegExp('^(([1-9]{1}\\d*)|([0]{1}))(\\.(\\d){0,2})?$')
      if (minVal && +val >= +minVal) {
        callBack(new Error(`请设置合理的满减金额`))
      } else if (!val) {
        callBack(new Error('请输入正确的金额!'))
      } else if (reg.test(val) === false) {
        callBack(new Error('请输入最多包含2位小数的正数!'))
      } else {
        callBack()
      }
    },
    // 校验可兑换范围的最小值
    handleLimitMin (rule, val, callBack, maxVal) {
      const reg = new RegExp('^(([1-9]{1}\\d*)|([0]{1}))(\\.(\\d){0,2})?$')
      if (maxVal && +val <= +maxVal) {
        callBack(new Error(`请设置合理的满减金额`))
      } else if (!val) {
        callBack(new Error('请输入正确的金额!'))
      } else if (reg.test(val) === false) {
        callBack(new Error('请输入最多包含2位小数的正数!'))
      } else {
        callBack()
      }
    },
    handleClearTime (val) {
      this.$set(this.onlineRule, 'useStartTime', '')
      this.$set(this.onlineRule, 'useEndTime', '')
    }
  }
}
</script>

<style scoped lang='scss'>
</style>
